<template>
  <div class="pc-token-holder">
    <div class="top-holder flex-left">
      <span>Top {{totalHolder}} {{$t('tokenDetail.holder')}}</span>
      <img src="../../../assets/img/computer/table-icon.png" alt />
      <router-link
        :to="{path:'/holder',query:{TokenName:$route.query.TokenName}}"
        class="view-table"
      >{{$t('tokenDetail.viewChart')}}</router-link>
    </div>
    <!-- 表格部分 -->
    <el-table :data="Holders" stripe style="width: 100%" class="data-table">
      <el-table-column prop="index" :label="$t('rank.rank')" width="90"></el-table-column>
      <el-table-column :label="$t('rank.adr')" width="200">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.address}`"
            class="light"
          >{{item.row.address|filterHash}}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('rank.num')" width="140">
        <template slot-scope="item">{{item.row.balance/100000000}}</template>
      </el-table-column>
      <el-table-column :label="$t('rank.percent')" width="120">
        <template slot-scope="item">{{(item.row.balance*100/totalNum).toFixed(8).slice(0,-6)}} %</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import holderBase from "@/mixins/TokenDetail/tokenHolder.js";
export default {
  mixins: [holderBase]
};
</script>

<style lang="scss">
.pc-token-holder {
  .top-holder {
    height: 53px;
    padding-left: 30px;
    background: #f9fafc;
    color: $font_grey;
    font-size: 12px;
    img {
      width: 20px;
      margin-left: 20px;
    }
    .view-table {
      margin-left: 8px;
      display: inline-block;
      // width: max-content;
      color: $orange_deep;
      text-align: center;
      border-bottom: 1px solid $orange_deep;
      cursor: pointer;
    }
  }
  .data-table {
    font-size: 12px;
  }
  .el-table td:nth-of-type(1) .cell {
    padding-left: 20px;
  }
}
</style>
